<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-07-08 13:38:58
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-09-27 17:57:16
 * @FilePath: \vue-project\src\views\System\components\HandleMenus.vue
 * @Description: 
 * 
-->
<template>
  <a-drawer :visible="visibleStatus" :width="500" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      <div class="modal_title">{{ title }}</div>
    </template>
    <AntForm ref="menuFormRef" :formFields="formFields" :formConfig="formConfig" :rules="rules" />
  </a-drawer>
</template>

<script setup>
import AntForm from '@/components/AntForm.vue'
import { ref, reactive, watch } from 'vue'
import { saveRules } from '@/api/system.js'
import { Message } from '@arco-design/web-vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

const props = defineProps({
  currentItem: {
    type: Object,
    default: () => {}
  },
  treeList: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  visibleStatus: {
    type: Boolean,
    default: false
  }
})

const menuFormRef = ref('')
//表单配置
const formConfig = reactive({
  width: '400px'
})
//表单字段配置
const formFields = ref([
  {
    type: 'treeSelect',
    prop: 'rule_id',
    label: '父级菜单',
    placeholder: '请选择父级菜单',
    isShow: true,
    defaultValue: '',
    treeData: [],
    fieldNames: {
      key: 'id',
      title: 'name',
      children: 'child'
    }
  },
  {
    type: 'input',
    prop: 'name',
    label: '菜单名称',
    placeholder: '请输入菜单名称',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'input',
    prop: 'frontpath',
    label: '菜单路径',
    placeholder: '请输入菜单路径',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'select',
    prop: 'method',
    label: '请求类型',
    placeholder: '请选择请求类型',
    isShow: true,
    defaultValue: '',
    options: [
      { label: 'GET', value: 'GET' },
      { label: 'POST', value: 'POST' }
    ]
  },
  {
    type: 'icon',
    prop: 'icons',
    label: '菜单图标',
    placeholder: '点击选择图标',
    isShow: true,
    disabled: true,
    defaultValue: ''
  },
  {
    type: 'number',
    prop: 'order',
    label: '排序',
    placeholder: '排序',
    isShow: true,
    disabled: true,
    defaultValue: ''
  },
  {
    type: 'switch',
    prop: 'menu',
    label: '是否菜单',
    placeholder: '排序',
    isShow: true,
    active: 1,
    unActive: 0,
    defaultValue: 1
  },
  {
    type: 'switch',
    prop: 'status',
    label: '是否启用',
    placeholder: '',
    active: 1,
    unActive: 0,
    isShow: true,
    defaultValue: 1
  }
])
//验证规则
const rules = reactive({
  rule_id: [{ required: true, message: '父级菜单不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
  method: [{ required: true, message: '请求类型不能为空', trigger: 'blur' }]
})

const emit = defineEmits(['closeDrawer'])

//确定
const handleOk = async () => {
  let valid = await menuFormRef.value.validateForm()
  if (valid == undefined) {
    let id = props.currentItem.id ? props.currentItem.id : ''
    let res = await saveRules(menuFormRef.value.form, id)
    if (res.code == 200) {
      userStore.getUserInfo()
      Message.success('操作成功')
      handleCancel()
    }
  }
}

//取消添加编辑
const handleCancel = () => {
  //重置表单
  menuFormRef.value.resetForm()
  //关闭弹窗
  emit('closeDrawer')
}
watch(
  () => props.currentItem,
  (val) => {
    formFields.value.map((item) => {
      item.defaultValue = val[item.prop]
    })
  },
  { deep: true }
)
watch(
  () => props.treeList,
  (val) => {
    formFields.value.map((item) => {
      if (item.type == 'treeSelect') {
        item.treeData = val
      }
    })
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped></style>
